<template>
  <view class="add-address-new-page">
    <!-- 顶部导航栏 -->
    <!-- <view class="header-nav">
      <view class="nav-content">
        <view class="back-btn" @click="goBack">
          <text class="iconfont-v2 icon-youjiantou back-icon" style="transform: rotate(180deg);"></text>
        </view>
        <view class="page-title">新增地址</view>
        <view class="header-actions">
          <text class="iconfont-v2 icon-gengduo more-icon"></text>
        </view>
      </view>
    </view> -->

    <!-- 地址选择区域 -->
    <!-- <view class="address-selection-section">
      <view class="address-item" @click="selectAddress">
        <view class="address-content">
          <text class="iconfont-v2 icon-dingwei address-icon"></text>
          <view class="address-text">{{ selectedAddress || '南宁市西乡塘区北湖南路32号' }}</view>
        </view>
        <text class="iconfont-v2 icon-youjiantou arrow-icon"></text>
      </view>
    </view> -->

    <!-- 表单区域 -->
    <view class="form-section">
      <view class="address-item" @click="selectAddress">
        <view class="address-content">
          <text class="iconfont-v2 icon-dingwei address-icon"></text>
          <view class="address-text">{{ selectedAddress || "南宁市西乡塘区北湖南路32号" }}</view>
        </view>
        <text class="iconfont-v2 icon-youjiantou arrow-icon"></text>
      </view>
      <!-- 大楼名 -->
      <view class="form-item">
        <view class="iconfont-v2 icon-dalou2-xianxing form-icon"></view>
        <input class="form-input" type="text" placeholder="大楼名, 如知新楼" v-model="formData.buildingName" />
      </view>

      <!-- 门牌号 -->
      <view class="form-item">
        <view class="iconfont-v2 icon-menpaihao form-icon"></view>
        <input class="form-input" type="text" placeholder="门牌号, 如101" v-model="formData.doorNumber" />
      </view>

      <!-- 姓名 -->
      <view class="form-item">
        <view class="iconfont-v2 icon-xingming form-icon"></view>
        <input class="form-input" type="text" placeholder="姓名" v-model="formData.recipientName" />
      </view>

      <!-- 电话号码 -->
      <view class="form-item">
        <view class="iconfont-v2 icon-dianhua form-icon"></view>
        <input class="form-input" type="number" placeholder="电话号码" v-model="formData.phoneNumber" />
      </view>
    </view>

    <!-- 底部确认按钮 -->
    <view class="bottom-action">
      <button class="confirm-btn" :class="{ disabled: !isFormValid }" :disabled="!isFormValid" @click="confirmAddress">
        <text>确定</text>
      </button>
    </view>

    <!-- 地址选择弹窗 -->
    <view class="address-modal" v-if="showAddressModal" @click="closeModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">选择地址</text>
          <text class="iconfont-v2 icon-close close-btn" @click="closeModal"></text>
        </view>
        <view class="address-list">
          <view class="address-option" v-for="(address, index) in addressOptions" :key="index" @click="selectAddressOption(address)">
            <view class="iconfont-v2 icon-dingwei address-option-icon"></view>
            <view class="address-option-text">{{ address }}</view>
            <view class="iconfont-v2 icon-dagou check-icon" v-if="selectedAddress === address"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 响应式数据
      selectedAddress: "南宁市西乡塘区北湖南路32号",
      showAddressModal: false,
      
      // 表单数据
      formData: {
        buildingName: "",
        doorNumber: "",
        recipientName: "",
        phoneNumber: "",
      },
      
      // 地址选项
      addressOptions: [
        "南宁市西乡塘区北湖南路32号", 
        "南宁市青秀区民族大道50号", 
        "南宁市兴宁区朝阳路88号", 
        "南宁市江南区星光大道168号"
      ]
    }
  },
  computed: {
    // 表单验证
    isFormValid() {
      return (
        this.formData.buildingName.trim() !== "" &&
        this.formData.doorNumber.trim() !== "" &&
        this.formData.recipientName.trim() !== "" &&
        this.formData.phoneNumber.trim() !== "" &&
        /^1[3-9]\d{9}$/.test(this.formData.phoneNumber)
      );
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    selectAddress() {
      this.showAddressModal = true;
    },
    closeModal() {
      this.showAddressModal = false;
    },
    selectAddressOption(address) {
      this.selectedAddress = address;
      this.closeModal();
    },
    confirmAddress() {
      if (!this.isFormValid) {
        return;
      }

      const addressData = {
        fullAddress: this.selectedAddress,
        buildingName: this.formData.buildingName,
        doorNumber: this.formData.doorNumber,
        recipientName: this.formData.recipientName,
        phoneNumber: this.formData.phoneNumber,
        completeAddress: `${this.selectedAddress}${this.formData.buildingName}${this.formData.doorNumber}`,
      };

      console.log("确认地址:", addressData);

      // 这里可以添加保存地址的逻辑
      uni.showToast({
        title: "地址保存成功！",
        icon: 'success'
      });

      // 返回上一页或跳转到相应页面
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss" scoped>
.add-address-new-page {
  min-height: 100vh;
  background: white;
  padding-bottom: 240rpx;
}

.header-nav {
  background: transparent;
  padding: 20rpx 30rpx;
  padding-top: 80rpx;

  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .back-btn {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      .back-icon {
        font-size: 40rpx;
        color: #333;
      }
    }

    .page-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }

    .header-actions {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .more-icon {
        font-size: 36rpx;
        color: #666;
        cursor: pointer;
      }
    }
  }
}

.address-selection-section {
  background: white;
  margin: 30rpx;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.address-item {
  padding: 30rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 2rpx solid #f0f0f0;

  &:hover {
    background: #f8f9fa;
  }

  .address-content {
    display: flex;
    align-items: center;
    gap: 24rpx;
    flex: 1;

    .address-icon {
      font-size: 36rpx;
      color: #333;
    }

    .address-text {
      flex: 1;
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
    }
  }

  .arrow-icon {
    font-size: 32rpx;
    color: #999;
  }
}

.form-section {
  margin: 40rpx 0;
  padding: 0 40rpx;

  .form-item {
    display: flex;
    align-items: center;
    padding: 40rpx 0;
    border-bottom: 2rpx solid #f0f0f0;

    .form-icon {
      font-size: 36rpx;
      color: #333;
      width: 48rpx;
      text-align: center;
      margin-right: 24rpx;
    }

    .form-input {
      flex: 1;
      border: none;
      outline: none;
      font-size: 32rpx;
      color: #333;
      background: transparent;

      &::placeholder {
        color: #999;
        font-size: 32rpx;
      }
    }
  }
}

.bottom-action {
  margin-top: 60rpx;
 
  // position: fixed;
  // bottom: 0;
  // left: 0;
  // right: 0;
  // background: white;
  // padding: 30rpx 40rpx 20rpx;
  // box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: center;

  .confirm-btn {
	padding:20rpx;
    width: 600rpx;
    height: 100rpx;
    background: #ed6567;
    border: none;
    border-radius: 50rpx;
    font-size: 36rpx;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover:not(.disabled) {
      background: #d55555;
      transform: translateY(-2rpx);
      box-shadow: 0 8rpx 24rpx rgba(237, 101, 103, 0.3);
    }

    &:active:not(.disabled) {
      transform: translateY(0);
    }

    &.disabled {
      background: #ccc;
      cursor: not-allowed;
      box-shadow: none;
      transform: none;
    }
  }
}

.address-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  .modal-content {
    background: white;
    border-radius: 24rpx;
    width: 90%;
    max-width: 800rpx;
    max-height: 60vh;
    overflow: hidden;

    .modal-header {
      padding: 40rpx;
      border-bottom: 2rpx solid #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .modal-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
      }

      .close-btn {
        font-size: 48rpx;
        color: #999;
        cursor: pointer;
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background-color 0.2s ease;

        &:hover {
          background: #f0f0f0;
        }
      }
    }

    .address-list {
      max-height: 600rpx;
      overflow-y: auto;

      .address-option {
        padding: 30rpx 40rpx;
        display: flex;
        align-items: center;
        gap: 24rpx;
        cursor: pointer;
        transition: background-color 0.2s ease;
        border-bottom: 2rpx solid #f8f9fa;

        &:hover {
          background: #f8f9fa;
        }

        &:last-child {
          border-bottom: none;
        }

        .address-option-icon {
          font-size: 32rpx;
          color: #ed6567;
        }

        .address-option-text {
          flex: 1;
          font-size: 28rpx;
          color: #333;
          line-height: 1.4;
        }

        .check-icon {
          font-size: 32rpx;
          color: #ed6567;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
